<template>
  <div class="login-container">
    <login-left-component />
    <login-right-component />
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import LoginLeftComponent from "/@/components/System/Login/LoginLeftComponent.vue";
import LoginRightComponent from "/@/components/System/Login/LoginRightComponent.vue";
export default defineComponent({
  name: "Login",
  components: {
    LoginLeftComponent,
    LoginRightComponent
  },
  setup() {
    
  },
});
</script>
<style lang="scss" scoped>
.login-container {
  display: flex;
  height: 100vh;

  & > div {
    flex: 1;

    &:first-child {
      padding-left: 5vw;
      text-align: left;
    }
  }

  &:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -48%;
    background-image: url(/static/img/svg/login-bg.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    content: "";
    z-index: -2;
  }
}

</style>
